<template>
    <div class="trend-detail pb-90 mainBackground">
        <!-- 头部 -->
        <!-- <div class="w-full h-88 flex items-center justify-between px-32 box-border">
            <div class="flex items-center w-full" @click="onRoute('/quotes?active=3')">
                <img src="@/assets/image/assets-center/convert.png" class="w-38 h-38" />
                <p class="font-38 font-600 ml-10">{{quote.name}}</p>
            </div>
            <div class="flex items-center">
                <img :src="require(`@/assets/image/icon-star${collected === '1' ? '_active': ''}.png`)"
                    class="w-30 h-30 mr-10 ml-20" @click="onCollect" />
                <img src="../../assets/image/public/record.png" alt="record-img" class="w-32 h-35 pl-30 "
                    @click="goHistory" />
            </div>
        </div> -->
        <trade-head @openRecord="openRecord" :backFunc="() => $router.push('/')" :symbol="symbol" :islevel="true"
            @update-coin="onUpdate" @data="quote = $event" :title="$t('永续')" @changeLine="onChangeLine" :isReturn="isReturn"
            :kineType="kineType" :tabIndex="tab" />
        <div class="flex justify-between px-32 pt-40" v-if="!kineType">
            <div class="w-368 h-80 mr-32 flex justify-center items-center rounded box-border tabBtn"
                :class="tab === '1' ? 'activeBtn' : ''" @click="onTab('1')">{{ $t('永续合约') }}</div>
            <div class="w-368 h-80 flex justify-center items-center rounded box-border tabBtn"
                :class="tab === '2' ? 'activeBtn' : ''" @click="onTab('2')">{{ $t('交割合约') }}</div>
        </div>
        <!-- 数据区 -->
        <div :class="{ slide2: animated1, slide1: animated2 }">
            <div>
                <div class="flex flex-1 px-32 mt-40">
                    <div class="flex flex-col font-22">
                        <p class="font-70 font-600" :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'">
                            {{ quote.close || '--' }}</p>
                        <p class="font-22 mt-10 textColor">≈ {{ currency.currency_symbol }}{{ quote.close ? (quote.close *
                            currency.rate).toFixed(quote.close.toString().split('.')[1] ?
                                quote.close.toString().split('.')[1].length : 2) : '--' }}
                            <span :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'">{{ quote.change_ratio
                                || (quote.change_ratio === 0 ? 0 : '--') }}%</span>
                        </p>
                        <p class="text-grey mt-10">{{ $t('标记价格') }} {{ quote.open || '--' }}</p>
                    </div>
                    <div class="flex flex-wrap flex-1 justify-end font-22">
                        <div class="flex w-1/2 flex-col justify-between w-177">
                            <p class="text-grey">{{ $t('24h最高价') }}</p>
                            <p class="textColor">{{ quote.high || '--' }}</p>
                        </div>
                        <div class="flex w-1/2 flex-col justify-between w-177">
                            <p class="text-grey">{{ $t('24h成交量') }}({{ symbol && symbol.toUpperCase() || '--' }})</p>
                            <p class="textColor">{{ fixDate(quote.amount * 1, $i18n) || '--' }}</p>
                        </div>
                        <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
                            <p class="text-grey">{{ $t('24h最低价') }}</p>
                            <p class="textColor">{{ quote.low || '--' }}</p>
                        </div>
                        <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
                            <p class="text-grey">{{ $t('24h成交额(USDT)') }}</p>
                            <p class="textColor">{{ (quote.volume * 1).toFixed(2) || '--' }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- k line-->
            <div class="mt-35 h-482-px">
                <kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
                    v-if="symbol" @updataLine="isChangeLine = false" />
            </div>
            <div class="w-full h-20 greyBg"></div>
            <!-- tab 区域-->
            <div class="pb-180 tabContent">
                <van-tabs v-model="active">
                    <van-tab :title="$t('委托订单')" name="1">
                        <div class="flex px-32 justify-between px-32">
                            <ul class="flex flex-col flex-1 mr-20">
                                <li class="font-28 text-grey mt-30 mb-15 w-full">
                                    <p>{{ $t('买入') }}</p>
                                    <p class="flex justify-between items-cener font-22">
                                        <span style="margin-right: -10px;">{{ $t('价格') }}(USDT)</span>
                                        <span>{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
                                    </p>
                                </li>
                                <li v-for="(item, index) in bids" :key="index" class="flex justify-between font-26 py-15"
                                    :style="{
                                        'background': `linear-gradient(to left,${theme == 'dark' ? '#121212' : '#ffffff'} 0% ` +
                                            (item.amount / bids[bids.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
                                            (item.amount / bids[bids.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) 100%)'
                                    }">
                                    <span class="textColor">{{ item.price || '--' }}</span>
                                    <span v-if="symbol == 'shib'" class="text-green">{{ fixDate(item.amount, $i18n) ||
                                        '--' }}</span>
                                    <span v-else class="text-green">{{ item.amount || '--' }}</span>
                                </li>
                            </ul>
                            <ul class="flex-1 flex flex-col ml-20">
                                <li class="font-28 text-grey mt-30 mb-15 w-full">
                                    <p>{{ $t('卖出') }}</p>
                                    <p class="flex justify-between items-center font-22">
                                        <span class="-ml-5">{{ $t('价格') }}(USDT)</span>
                                        <span>{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
                                    </p>
                                </li>
                                <li v-for="(item, index) in asks" :key="index" class="flex justify-between font-26 py-15"
                                    :style="{
                                        'background': `linear-gradient(to left,${theme == 'dark' ? '#121212' : '#ffffff'} 0% ` +
                                            (item.amount / asks[asks.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
                                            (item.amount / asks[asks.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) 100%)'
                                    }">
                                    <span class="textColor">{{ item.price || '--' }}</span>
                                    <span v-if="symbol == 'shib'" class="text-red">{{ fixDate(item.amount, $i18n) ||
                                        '--' }}</span>
                                    <span v-else class="text-red">{{ item.amount || '--' }}</span>
                                </li>
                            </ul>
                        </div>
                    </van-tab>
                    <van-tab :title="$t('最新交易')" name="2">
                        <ul class="px-32 font-28 text-grey">
                            <li class="flex justify-between mt-30">
                                <span class="flex-1">{{ $t('时间') }}</span>
                                <span class="flex-1">{{ $t('方向') }}</span>
                                <span class="flex-1">{{ $t('价格') }}(USDT)</span>
                                <span class="flex-1 flex justify-center">{{ $t('数量') }}({{ symbol.toUpperCase() }})</span>
                            </li>
                            <li v-for="(item, index) in deals" :key="item.ts + item.price + item.amount || index"
                                class="flex  justify-between mt-30">
                                <span class="flex-1">{{ item.current_time ? item.current_time : '--' }}</span>
                                <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'" class="flex-1">{{
                                    item.direction === 'buy' ? $t('买入') : $t('卖出') }}</span>
                                <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
                                    class="flex-1 flex-justify-center">{{ item.price || '--' }}</span>
                                <span class="flex-1 flex justify-center">{{ item.amount || '--' }}</span>
                            </li>
                        </ul>
                    </van-tab>
                    <van-tab :title="$t('深度图')" name="3">
                        <div class="buy-sell-box">
                            <div class="buy-item">
                                <div class="bg-line"></div>
                                {{ $t('买盘') }}
                            </div>
                            <div class="sell-item">
                                <div class="bg-line"></div>
                                {{ $t('卖盘') }}
                            </div>
                        </div>
                        <div class="deep-chart-box">
                            <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
                        </div>
                    </van-tab>
                    <!-- <van-tab :title="$t('数据分析')" name="4">
                        <div class="capital-box">
                            <div class="capital-flows">
                                <span class="title">资金流向分析</span><van-icon name="warning-o" />
                            </div>
                            <div class="tab-box">
                                <div class="tab-item" v-for="(item, index) in 10">
                                    15M
                                </div>
                            </div>
                            <div class="pie-box">
                                <pie-chart></pie-chart>
                            </div>
                            <div class="order-box">
                                <div class="order-header">
                                    <div class="flex-item">订单类型</div>
                                    <div class="flex-item">买入</div>
                                    <div class="flex-item">卖出</div>
                                    <div class="flex-item">净流入</div>
                                </div>
                                <div class="order-main flex" v-for="(item, index) in 4" :key="index">
                                    <div class="flex-item">大单</div>
                                    <div class="flex-item text-red">9.3720</div>
                                    <div class="flex-item text-red">3.0200</div>
                                    <div class="flex-item text-green">6.3400</div>
                                </div>
                            </div>

                            <div class="capital-title">
                                <span class="title">5*24小时大单流入（{{ symbol.toUpperCase() }}）</span>
                                <div class="text">5日主力净流入 -348.9411</div>
                            </div>
                            <div class="cylinder-kline">
                                <cylinder-chart></cylinder-chart>
                            </div>
                            <div class="capital-title">
                                <span class="title">24小时资金流入（{{ symbol.toUpperCase() }}）</span>
                            </div>
                            <div class="inflow-kline">
                                <inflow-kline></inflow-kline>
                            </div>
                        </div>
                    </van-tab> -->
                    <!-- <van-tab :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">
                        <div class="px-20 py-20 font-40 text-grey">
                            {{ $t('关于名称', { 'symbol': symbol.toUpperCase() }) }}
                        </div>
                        <div class="px-20 py-20 font-32 text-grey">
                            {{ $t(`${symbol}简介`, { 'symbol': symbol.toUpperCase() }) }}
                        </div>
                    </van-tab> -->
                </van-tabs>
            </div>
            <!-- 按钮区 -->
            <div class="flex pl-40 pt-11 pb-11 pr-32 text-white justify-between  fixed bottom-108  w-full box-border h-90-px z-10 buttonSafe"
                v-if="!kineType" :class="theme == 'dark' ? 'bg-night1' : 'bg-grey'">
                <div class="flex flex-col mx-30 items-center" @click="onRoute('/exchangeRate')">
                    <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
                    <p class="font-25 text-grey mt-8 text-center">{{ $t('汇率') }}</p>
                </div>
                <div ref="toBuy" class="w-270 h-88 bg-green flex justify-center items-center rounded-lg"
                    @click="onSubmit('buy')">
                    {{ tab == 1 ? $t('开多') : $t('买多') }}
                </div>
                <div ref="toSell" class="w-270 h-88 bg-red flex justify-center items-center rounded-lg"
                    @click="onSubmit('sell')">
                    {{ tab == 1 ? $t('开空') : $t('买空') }}</div>
            </div>
        </div>
        <van-popup v-model="show" class="rounded-2xl" :key="initFutrue.session_token">
            <popup-confirm-order :paras="initFutrue.para" :symbol="symbol" :direction="direction"
                :balance="initFutrue.amount" :price="quote.close" @close="onClose" @confirm="onOrderConfirm"
                v-if="popType === 'confirm'" />
            <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
                @continueToBuy="order()" @timeEnd="handleTimeEnd" :price="quote.close" v-else />
        </van-popup>
    </div>
</template>
<script>
import { Tab, Tabs, Popup } from 'vant';
import TradeHead from '@/components/trade-head/index.vue'
import KlineCharts from '@/components/kline-charts'
import deepChart from '@/components/deepChart'
import pieChart from '@/components/pieChart'
import inflowKline from '@/components/inflow-kline'
import cylinderChart from '@/components/cylinderChart'
import { _getHomeList, _collect, _deleteCollect } from '@/API/home.api'
import { _getBalance, _futrueOrder, _futrueOrderInit, _futrueOrderDetail } from '@/API/trade.api'
import { mapGetters } from 'vuex';
import { fixDate } from "@/utils/utis";
import { WS_URL } from '@/config';
import PopupDelivery from "@/components/popup-delivery";
import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
    name: 'TrendDetails',
    components: {
        [Tabs.name]: Tabs,
        [Tab.name]: Tab,
        [Popup.name]: Popup,
        KlineCharts,
        PopupDelivery,
        PopupConfirmOrder,
        TradeHead,
        deepChart,
        pieChart,
        inflowKline,
        cylinderChart
    },
    data() {
        const arr = []
        for (let i = 0; i < 17; i++) {
            arr.push({
                id: i
            })
        }
        return {
            show: false,
            direction: 'buy',
            initFutrue: {},
            detailData: {},
            price: '',
            popType: 'confirm', // confirm / counting
            fixDate,
            tab: '1', // 顶部标签
            symbol: '',
            quoteData: [],
            quote: {},
            active: 1,
            asks: arr, // 卖
            bids: arr, // 买
            deals: arr, // 交易
            sockets: {
                quote: null,
                deals: null,
                askBid: null
            },
            animated1: false,
            animated2: false,
            updateKey: 1,
            collected: '0',  // 是否自选
            maxSell: 0, // 卖单最大
            maxBuy: 0, // 买单最大
            order_no: '',
            timer: null,
            isChangeLine: false,
            isReturn: true, //是否有返回
            kineType: '',
            // updateData: {}
            deepBuy: [],
            deepSell: [],
            fromPath: ''
        }
    },
    computed: {
        ...mapGetters({
            currency: 'home/currency',
            userInfo: 'user/userInfo',
            theme: 'home/theme'
        })
    },
    mounted() {
        //this.continueOrder()
        this.kineType = this.$route.query.kineType
    },
    created() {

    },
    watch: {
        active(val) { // tab切换
            if (val / 1 === 1 || val / 1 === 3) {
                this.sockets.deals && this.sockets.deals.close()
                this.sockets.deals = null
                if (this.symbol) { // 刚进来可能是null
                    this.startAskBidSocket()
                }
            } else {
                this.sockets.askBid && this.sockets.askBid.close()
                this.sockets.askBid = null
                this.startDealsSocket()
            }
        },
        symbol() {
            this.closeSocket()
        }


    },
    methods: {
        onChangeLine() {
            this.isChangeLine = true
        },
        continueOrder() {
            let direction = this.$route.query.direction
            if (direction) {
                this.symbol = this.$route.params.symbol
                this.tab = '2'
                console.log(this.tab)
                this.onSubmit(direction);
            }
        },
        order() {
            this.onSubmit(this.direction);
        },
        onTab(e) {
            this.tab = e
            // this.$router.go()
            if (e == 1) {
                this.animated1 = true
                this.timer = setTimeout(() => {
                    this.animated1 = false
                    clearTimeout(this.timer)
                }, 200)
            } else {
                this.animated2 = true
                this.timer = setTimeout(() => {
                    this.animated2 = false
                    clearTimeout(this.timer)
                }, 200)
            }
        },

        onCollect() { // 收藏，取消收藏
            let _api = _collect
            if (this.collected === '1') {
                _api = _deleteCollect
            }
            _api(this.symbol).then(() => {
                this.collected = this.collected === '1' ? '0' : '1'
                if (this.collected === '1') {
                    this.$toast.success(this.$t('收藏成功'))
                } else {
                    this.$toast.success(this.$t('取消收藏'))
                }
            })
        },
        goHistory() {
            const url = this.topIndex / 1 === 1 ? 'perpetualHistory' : 'deliveryContractHistory'
            this.$router.push({
                path: `/${url}?symbol=${this.symbol}`
            });
        },
        fetchData() {
            this.closeSocket()
            _getHomeList(this.symbol).then(data => {
                // console.log(data[0])
                this.quote = data[0]
                this.$nextTick(() => {
                    if (!this.sockets.quote && this.symbol) {
                        this.startQuoteScoket()
                    }

                    if ((this.tab === '1' || this.tab === '3') && !this.sockets.askBid && this.symbol) {
                        this.startAskBidSocket()
                    }
                })
                // this.startDealsSocket()
            })
        },
        startQuoteScoket() {
            this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`)
            this.sockets.quote.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.quote = _data[0]
                    let str = _data[0] ? _data[0].close.toString() : ''
                    if (str.indexOf('.') != -1) {
                        this.coinLength = str.split('.')[1].length
                    }
                    this.updateKey++
                }
            }
        },
        startAskBidSocket() { // 委托
            this.sockets.askBid = new WebSocket(`${WS_URL}/3/${this.symbol}`)
            this.sockets.askBid.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    let { asks, bids } = _data
                    this.deepBuy = bids
                    this.deepSell = asks
                    asks = asks.sort((prev, next) => prev.price - next.price)
                    bids = bids.sort((prev, next) => prev.price - next.price)
                    this.asks = asks.slice(0, 17)
                    this.bids = bids.reverse().slice(0, 17)
                }
            }
        },
        startDealsSocket() { // 交易
            this.sockets.deals = new WebSocket(`${WS_URL}/2/${this.symbol}`)
            this.sockets.deals.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
                if (code / 1 === 0) {
                    this.deals = _data.data.slice(0, 17)
                }
            }
        },
        onRoute(path) { // 跳转汇率页面
            this.$router.push(path)
        },
        onSubmit(direction) { // TODO: 返回
            if (this.tab === '2') {
                this.popType = 'confirm'
                this.direction = direction
                _futrueOrderInit(this.symbol).then(data => {
                    this.initFutrue = data
                    this.show = true
                })
                return
            } else {
                let currentType = direction == 'buy' ? 'long' : 'short'
                this.$router.push(`/perpetualContract/${this.symbol}?currentType=${currentType}`)
            }
        },
        onClose() {
            this.show = false
        },
        handleTimeEnd() {
            _futrueOrderDetail(this.order_no).then(data => {
                clearTimeout(this.timeout)
                this.detailData = data
                if (data.state !== 'created') {
                    this.timeout = setTimeout(() => {
                        this.handleTimeEnd()
                    }, 1000)
                }
            })
        },
        onOrderConfirm(e) { // 确认订单
            _futrueOrder({ ...e, symbol: this.symbol, direction: this.direction, session_token: this.initFutrue.session_token }).then(data => {
                // console.log(data)
                this.order_no = data.order_no
                _getBalance().then(data => { // 刷新余额
                    this.$store.commit('user/SET_USERINFO', { balance: data.money })
                })
                _futrueOrderDetail(data.order_no).then(data => {
                    this.detailData = data
                    this.popType = ''
                })
            }).catch(() => {
                setTimeout(() => {
                    _futrueOrderInit(this.symbol).then(data => {
                        this.order_no = ''
                        this.initFutrue = data
                    })
                }, 1000);
            })
        },
        closeSocket() {
            this.sockets.quote && this.sockets.quote.close()
            this.sockets.deals && this.sockets.deals.close()
            this.sockets.askBid && this.sockets.askBid.close()
            this.sockets.quote = null
            this.sockets.deals = null
            this.sockets.askBid = null
        },
        onUpdate(symbol) { // 更新
            this.closeSocket()
            this.symbol = symbol;
            this.fetchData()
        },
        openRecord() {
            if (this.fromPath == 'Trade') {
                this.$router.push('/tradeRecord/' + this.symbol)
            } else {
                this.$router.push('/perpetualHistory?symbol=' + this.symbol)
            }
            console.log(this.fromPath)
        }
    },
    activated() {
        // if (!this.sockets.quote && this.symbol) {
        //     this.startQuoteScoket()
        // }
        // if (this.tab === '1' && !this.sockets.askBid && this.symbol) {
        //     this.startAskBidSocket()
        // }
        if (!this.symbol) {
            this.symbol = this.$route.params.symbol
            this.fetchData()
            this.closeSocket()
        }
        if (this.tab === '2' && !this.sockets.deals && this.symbol) {
            this.startDealsSocket()
        }
        this.continueOrder()
        this.kineType = this.$route.query.kineType
    },
    deactivated() {
        this.closeSocket()
    },
    beforeDestroy() {
        this.sockets.quote && this.sockets.quote.close()
        this.sockets.deals && this.sockets.deals.close()
        this.sockets.askBid && this.sockets.askBid.close()
        this.sockets.quote = null
        this.sockets.deals = null
        this.sockets.askBid = null
    },
    beforeRouteEnter(to, from, next) {
        const { params: { symbol } } = to
        console.log(symbol)
        next(vm => {
            vm.fromPath = from.name
            vm.symbol = symbol
            vm.closeSocket()
            vm.fetchData()
        })
    }
}
</script>
<style lang="scss" scoped>
@import "../../assets/init.scss";


@keyframes animate1 {
    0% {
        opacity: 1;
        transform: translate3d(100%, 0, 0);
    }

    //   40% {
    //      opacity: 1;
    //     transform: translate3d(50%, 0, 0);
    //   }
    100% {
        opacity: 1;
        transform: translate3d(0%, 0, 0);
    }
}

@keyframes animate2 {
    0% {
        opacity: 1;
        transform: translate3d(-100%, 0, 0);
    }

    //   40% {
    //      opacity: 1;
    //     transform: translate3d(50%, 0, 0);
    //   }
    100% {
        opacity: 1;
        transform: translate3d(0%, 0, 0);
    }
}

.slide1 {
    animation: animate1 200ms linear;
}

.slide2 {
    animation: animate2 200ms linear;
}

.tabBtn {
    border: 2px solid #EAEDF2;
    border-radius: 9px;
    color: #868D9A;
    ;
}

.activeBtn {
    @include themify() {
        background: themed("btn_main");
    }

    color: #fff;
    border: none;
}

.pb-180 {
    ::v-deep .van-tab {
        flex: initial;
        padding: 0 32px;
    }

    ::v-deep .van-tab__text--ellipsis {
        padding: 14px 0;
    }

    ::v-deep .van-tabs__line {
        width: 160px;
    }
}

.buttonSafe {
    bottom: calc(constant(safe-area-inset-bottom));
    bottom: calc(env(safe-area-inset-bottom));
}


.trend-detail {
    .tabBtn {
        @include themify() {
            border: 2px solid themed("border_color");
        }
    }

    ::v-deep .van-tabs__nav {
        @include themify() {
            background: themed("main_background") !important;
        }
    }

    ::v-deep .van-tab--active {
        @include themify() {
            color: themed("text_color");
        }
    }

    ul li {
        @include themify() {
            background: themed("main_background");
        }
    }

    .activeBtn {
        border: none !important;
    }

}


.deep-chart-box {
    padding-left: 30px;
    overflow: hidden;
}

.capital-box {
    padding: 30px 30px;

    .capital-flows {
        display: flex;
        align-items: center;

        .title {
            color: #ECF0F8;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
            display: flex;
        }
    }

    .tab-box {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        .tab-item {
            padding: 15px 22px;
            background: #171A27;
            border-radius: 2px;
            color: #FFFFFF;
            font-size: 30px;
            margin-right: 30px;
            margin-bottom: 20px;
            font-size: 14px;
        }
    }

    .pie-box {
        background: #161D2B;
        padding: 50px 0;
    }

    .order-box {
        border: 1px dashed #3C3F55;
        border-radius: 3px;
        margin-top: 20px;
        color: #C5CBD8;

        .order-header {
            display: flex;
        }

        .flex-item {
            flex: 1;
            text-align: center;
            padding: 20px 0;

        }
    }

    .capital-title {
        padding-top: 30px;

        .title {
            color: #ECF0F8;
            font-size: 30px;
            font-weight: bold;
            margin-right: 10px;
        }

        .text {
            color: #C5CBD8;
            font-size: 14px;
            margin-top: 10px;
        }
    }
}

.buy-sell-box {
    display: flex;
    justify-content: center;
    margin: 30px 0px;

    .buy-item {
        display: flex;

        @include themify() {
            color: themed("text_color");
        }

        .bg-line {
            width: 40px;
            height: 40px;
            background: #D9001B;
            border-radius: 5px;
            margin-right: 10px;
        }
    }

    .sell-item {
        margin-left: 30px;
        display: flex;

        @include themify() {
            color: themed("text_color");
        }

        .bg-line {
            width: 40px;
            height: 40px;
            background: #2EBD85;
            border-radius: 5px;
            margin-right: 10px;
        }
    }
}

.bg-white {
    .capital-flows {
        display: flex;
        align-items: center;

        .title {
            color: #000;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
            display: flex;
        }
    }


    .tab-box {
        .tab-item {
            background: #f7f8fa;
            color: #000;
            font-size: 14px;
        }
    }

    .pie-box {
        background: #fff;
        padding: 50px 0;
    }

    .order-box {
        border: 1px dashed #000;
        border-radius: 3px;
        margin-top: 20px;
        color: #000;
    }

    .capital-title {
        padding-top: 30px;

        .title {
            color: #000;
            font-size: 30px;
            font-weight: bold;
            margin-right: 10px;
        }

        .text {
            color: #000;
            font-size: 14px;
            margin-top: 10px;
        }
    }
}

::v-deep .van-popup {
    @include themify() {
        background: themed("main_background");
    }
}

.tabContent {
    ::v-deep .van-tabs__wrap {
        height: 100% !important;
    }
}
</style>
